<template>
	<div class="category_container">
		<div class="category_adv">

		</div>
		<!-- 顶部搜索框 -->
		<div class="category_search">
			<van-search placeholder="请输入搜索关键词" class="category_text" @focus="toSearch" />
		</div>
		<div class="h_44"></div>
		<div class="category_goods">
			<!-- 左侧导航 -->
			<div class="category_sidebar">
				<van-sidebar v-model="active">
					<van-sidebar-item :title="item.name" v-for="item in categorySidebar" :key="item.id"
						@click="handleSid(item.id) " />
				</van-sidebar>
			</div>
			<!-- 右侧内容 -->
			<div class="goods_content">
				<div class="category_banner">
					<div class="banner" v-for="item in cateImg.bannerList" :key="item.id">
						<img :src="item?.picUrl" class="goods_image" />
					</div>
					<div v-for="item in categorySidebarId" :key="item.id" class="goods_banner_img">
						<div class="recommend">{{ item.name }}</div>
						<div class="flex item_banner">
							<div class="banner_1" v-for="goods in item.categoryList" :key="goods.id">
							<img @click="toDetail(goods)"
								:src="goods?.wapBannerUrl"
								class="goods_image1" />
							<div class="name">{{ goods.name }}</div>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Tabbar></Tabbar>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import categoryApi from '../../api/category'
import type { categoryModel, categoryValueModel,anyObjModel,bannerModel} from '../../api/category'
import { useRouter } from 'vue-router';

const router = useRouter()

const toSearch = () => {
	router.push('/search')
}

const toDetail = (goods:any) => {
	// router.push('/categorydetail')
	let id = goods.superCategoryId
	let superCategoryId = goods.id
	let categoryType = goods.categoryType
	// console.log(superCategoryId,id,categoryType);
	
	router.push(`/categorydetail/${categoryType}/${superCategoryId}/${id}`)
	
}

const active = ref(0)
const categorySidebar = ref<categoryModel[]>([])
const categorySidebarId = ref<categoryValueModel[]>([])
const cateImg = ref<anyObjModel>({})

// 获取导航栏列表数据
const cateGoryList = async () => {
	try {
		let result = await categoryApi.getCategoryList()
		// console.log(result);
		categorySidebar.value = result.data.categoryL1List

	} catch (error) {
		console.log(error);
	}
}

// 根据分类ID获取分类的列表
const categoryByid = async (id:string) => {
	try {
		let result = await categoryApi.getCategoryByIdList(id)
		categorySidebarId.value = result.data.categoryGroupList
		cateImg.value = result.data.currentCategory
		// console.log(result);
	} catch (error) {
		console.log(error);

	}
}

const handleSid = (id: string) => {
	categoryByid(id)
}
onMounted(async () => {
	await cateGoryList()
	categoryByid(categorySidebar.value[0].id)

})
</script>

<style lang="less" scoped>
.category_container {
	height: 100%;
	width: 100%;
	background: #fff;
	.category_search {
		width: 345px;
		height: 44px;
		padding: 0 15px;
		padding-top: 10px;
		border-bottom: 1px solid #d9d9d9;
		position: fixed;
		top: 0;
		z-index: 999;
		background-color: #fff;
		.category_text {
			width: 345px;
			height: 28px;
			line-height: 21;
			font-size: 14px;
			color: #ededed;
			border-radius: 3px;
			justify-content: center;
		}
	}
	.h_44 {
		height: 54px;
	}

	.category_goods {
		display: flex;
		height: 100%;
		border-bottom: 1px solid #d9d9d9;

		.category_sidebar {
			min-height: 100%;
			// width: 1.62rem;
			border-right: 1px solid #d9d9d9;
			width: 81px;
			// .left_scroll{
			// 	height: 100%;
			position: fixed;
			left: 0;
// z-index: 999;
			// }
		}

		.goods_content {
			padding: 15px 15px 10.5px;
			width: 375px;

			margin-left: 81px;
			.category_banner {
				width: 264px;
				height: 100%;

				.banner {
					width: 264px;
					height: 96px;

					.goods_image {
						width: 264px;
						height: 96px;
						line-height: 21px;
					}
				}

				.recommend {
					font-size: 14px;
					font-weight: bold;
					line-height: 21px;
					margin-top: 20px;
					border-bottom: 2px solid #ccc;
				}
				.item_banner{
					justify-content:space-between;
					flex-wrap: wrap;
					width: 100%;
					margin-bottom: 10px;
				}
				.banner_1 {
					// width: 264px;
					height: 108px;
					.goods_image1 {
						width: 72px;
						height: 72px;
						margin-top: 20px;
					}

					.name {
						text-align: center;
						font-size: 12px;
						color: #333;
						overflow: hidden;
						text-overflow: ellipsis;
						height: 36px;
					}
				}
			}

		}
	}


}</style>
